<template>
  <!-- 平台字典管理 -->
  <div class="main" style="display: flex;">
    <div class="main_left_t" :style="styles_left.type?styles_left.open:styles_left.close">
      <div class="main_right_t_in">
        <!-- 搜索 -->
        <searchComponents :searchData="dataModel" @searchCallBack="searchCallBack"></searchComponents>
        <el-button style="float:right;margin-right:30px;margin-top:25px;margin-bottom:25px;" type="primary" size="mini" plain @click="sunS_F">搜索</el-button>
        <div style="border-top:1px solid #E6E6E6;padding:0px 20px;"></div>
        <div style="padding: 25px 30px;">
          <!--添加和批量删除组件-->
          <!-- <buttonhurdle
            class="buttonhurdle"
            :diaDataAdd="dataModel"
            @toAdd="toAdd"
            @toDelete="toDelete"
          ></buttonhurdle> -->
          <addComponent :diaDataAdd="dataModel" @toAdd="toAdd"></addComponent>
        </div>
      </div>
      <div class="out" style="padding:0px 30px">
        <!--数据列表 @selection-change="handleSelectionChange"-->
        <el-table ref="multipleTable" :data="dataAttribute" @current-change="tableCurrentChange" v-loading.body="false" border fit class="elTable" highlight-current-row size="mini" :cell-style="{padding:'5px 0'}" style="width:100%">
          <!-- <el-table-column align="center" type="selection" :show-overflow-tooltip="true" width="55"></el-table-column> -->
          <el-table-column align="center" v-for="item in TableDataModel" :key="item.id" :label="item.CN" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <span v-if="item.EN=='type'&&scope.row[item.EN]=='1'">生产厂商</span>
              <span v-else-if="item.EN=='type'&&scope.row[item.EN]=='2'">经销商</span>
              <span v-else-if="item.EN=='type'&&scope.row[item.EN]=='3'">自来水公司</span>
              <span v-else>{{scope.row[item.EN]}}</span>
            </template>
          </el-table-column>
          <el-table-column width="250px" align="center" label="操作">
            <template slot-scope="scope">
              <!-- 查看按钮 -->
              <el-button style="color:#0B9AC3;border:none;" icon="el-icon-view" circle @click="makeExaId(scope.row)"></el-button>
              <!-- 修改组件 -->
              <modificationi class="inline_block" :attributeOrder="dataModel" :modData="scope.row" @modifyData="modifyData"></modificationi>
              <!-- 删除按钮 -->
              <el-button style="color:#C90010;border:none;" icon="el-icon-delete" circle @click="deleteList(scope.row.id)"></el-button>
              <!-- 查看类型 -->
              <el-button style="color:#C90010;border:none;" icon="el-icon-search" circle @click="typeFuns(scope.row.id)"></el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="pagetotal"></el-pagination>
      </div>

      <!-- 查看组件 -->
      <examine :DialogVisibleMod="DialogVisibleExamine" :modData="examineData" :attributeOrder="dataModel" @examineDialog="examineDialog"></examine>
    </div>
    <div class="main_right_t" :style="styles_left.type?style_right.open:style_right.close">
      <right :rightHurdleData="rightHurdleData" :penetrateId="penetrateId" @rightSwitch="rightSwitch"></right>
      <!-- <right
        v-if="rightHurdleData.length>0"
        :rightHurdleData="rightHurdleData"
        @choiceReturn="choiceReturn"
        @forDeleteData="forDeleteData"
      ></right> -->
    </div>
  </div>
</template>
<script>
//引入按钮栏
import buttonhurdle from '@/views/components/FLPage/buttonhurdle'
import addComponent from '@/views/components/FLPage/addComponent'
//引入修改组件
import modificationi from '@/views/components/FLPage/modificationi'
//引入查看组件
import examine from '@/views/components/FLPage/examine'
//引入搜索组件
import searchComponents from '@/views/components/FLPage/searchComponents'
//引入弹窗表格
import right from './right'
//引入API
import {
  //左侧分页
  LeftSearchPageSize, //分页
  deletetSTypegroup, //删除
  addSTypegroup, //左侧添加
  //y右侧.....................................
  addList, //增加
  deleteList, //单项删除
  rightSearchPageSize, //分页查询
  putList, //修改
  getList, //查看
  getFindRight, //查看类型
  putSTypegroup,
  //根据ID获取
} from '@/api/TenantRoleManagement'
export default {
  components: {
    buttonhurdle,
    modificationi,
    examine,
    searchComponents,
    right, //左侧表格弹窗
    addComponent,
  },
  data() {
    return {
      //左侧动画
      styles_left: {
        type: false,
        close: 'width: 100%;transition: 0.3s;',
        open: 'width: 800px;transition: 0.3s;',
      },
      //右侧动画
      style_right: {
        type: true,
        open: 'flex: 100;background:#F0F4FA;transition: 0.3s;',
        close: 'width: 0px;transition: 0.3s;overflow: hidden;',
      },
      penetrateId: undefined,
      menuTrigger: '',
      //搜索
      searchContent: {
        typeCode: '',
        createDate: undefined,
      },
      //后端传来的数据
      dataAttribute: [],
      //分页
      currentPage: 1, //当前页
      pagesize: 10, //每页条数
      pagetotal: 0, //总条数
      //左边菜单-----------------------------------
      rightHurdleData: [
        // {
        //   id: "",
        //   typeGroupCode: "",
        //   typeGroupName: "",
        //   createDate: "",
        //   createName: ""
        // }
      ],
      //查看的数据
      examineData: {},
      //查看的弹窗控制器
      DialogVisibleExamine: false,
      //表格中选中的数组
      multipleSelection: [],
      //数据模型
      dataModel: [
        {
          EN: 'id',
          CN: '编号',
          value: '',
          type: 'input',
          option: [],
          typeFrom: 'string',
          Exp: '',
          err: '',
          result: true,
          sign: true,
          searchSign: false,
          addSign: false,
          tableSign: false,
          examineSign: true,
          examineDisabled: false,
          modificationSign: false,
        },
        // {
        //   EN: "typeCode",
        //   CN: "状态码",
        //   value: "",
        //   type: "input",
        //   option: [],
        //   typeFrom: "string",
        //   Exp: "",
        //   err: "",
        //   result: true,
        //   sign: true,
        //   searchSign: true,
        //   addSign: false,
        //   tableSign: true,
        //   examineSign: true,
        //   examineDisabled: false,
        //   modificationSign: true
        // },
        // {
        //   EN: "typeGroupId",
        //   CN: "类型组Id",
        //   value: "",
        //   type: "input",
        //   option: [],
        //   typeFrom: "string",
        //   Exp: "",
        //   err: "",
        //   result: true,
        //   sign: true,
        //   searchSign: false,
        //   addSign: false,
        //   tableSign: false,
        //   examineSign: false,
        //   examineDisabled: false,
        //   modificationSign: false
        // },
        {
          EN: 'typeGroupName',
          CN: '字典名称',
          value: '',
          type: 'input',
          option: [],
          typeFrom: 'string',
          Exp: '',
          err: '',
          result: true,
          sign: true,
          searchSign: true,
          addSign: true,
          tableSign: true,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true,
        },
        {
          EN: 'typeGroupCode',
          CN: '字典编号',
          value: '',
          type: 'input',
          option: [],
          typeFrom: 'string',
          Exp: '^[_0-9A-Za-z]{2,40}$',
          err: '2-40个字符 数字和字母组成',
          result: true,
          sign: true,
          searchSign: true,
          addSign: true,
          tableSign: true,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true,
        },
        {
          EN: 'createDate',
          CN: '创建时间',
          value: '',
          type: 'date',
          option: [],
          typeFrom: 'string',
          Exp: '',
          err: '',
          result: true,
          sign: true,
          searchSign: false,
          addSign: false,
          tableSign: false,
          examineSign: true,
          examineDisabled: true,
          modificationSign: false,
        },
        // {
        //   EN: "createName",
        //   CN: "创建人",
        //   value: "",
        //   type: "input",
        //   option: [],
        //   typeFrom: "string",
        //   Exp: "",
        //   err: "",
        //   result: true,
        //   sign: true,
        //   searchSign: false,
        //   addSign: false,
        //   tableSign: false,
        //   examineSign: true,
        //   examineDisabled: true,
        //   modificationSign: false
        // },
      ],
      //传入leftTable组件的数据
      forLeftTableData: [],
      //表格单选数据
      currentRow: null,
    }
  },
  computed: {
    //解决v-for v-if在同一标签警告问题
    TableDataModel() {
      let new_DataModel = JSON.parse(JSON.stringify(this.dataModel))
      for (let i = 0; i < new_DataModel.length; i++) {
        if (!new_DataModel[i].tableSign) {
          console.log('-------------计算属性-----------')
          new_DataModel.splice(i, 1)
        }
      }
      return new_DataModel
    },
  },
  created() {
    this.LSPS(1, 10, this.searchContent)
    this.forData(this.currentPage, this.pagesize, this.searchContent)
    console.log('___________44________')
    console.log(this.dataAttribute)
  },
  methods: {
    //组件三角形通知关闭右侧表格
    rightSwitch(val) {
      console.log(val)
      //恢复初始比例
      this.styles_left.type = false
    },
    //左分页
    LSPS(page, size, obj) {
      console.log(obj)
      // debugger
      LeftSearchPageSize(page, size, obj).then((response) => {
        console.log('左分页接口')

        if (response.data.list.length > 0) {
          //dataAttribute
          this.dataAttribute = response.data.list
          this.pagetotal = response.data.total
        }
      })
    },
    //左单选返回
    choiceReturn(valRow) {
      console.log(valRow)
      console.log('左单选返回')
    },
    //左删除
    forDeleteData(valRow) {
      console.log(valRow)
      console.log('删除！')
      this.$confirm('确认删除？')
        .then((_) => {
          deletetSTypegroup(valRow.id)
            .then((response) => {})
            .catch(() => {
              alert('删除失败!')
            })
          done()
        })
        .catch((_) => {})
    },
    //表格单选
    tableCurrentChange(val) {
      this.currentRow = val
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
      //传递删除的参数
      this.deleteDataList = val
    },
    //查看关闭弹窗
    examineDialog(dialogVisibleMod) {
      this.DialogVisibleExamine = false
    },
    //分页查询
    forData(page, size, content) {
      LeftSearchPageSize(page, size, content).then((response) => {
        this.dataAttribute = JSON.parse(JSON.stringify(response.data.list))
      })
    },
    //分页
    handleSizeChange(val) {
      console.log('每页 ' + val + ' 条')
      this.LSPS(this.currentPage, val, this.searchContent)
    },
    handleCurrentChange(val) {
      console.log('当前页: ' + val)
      this.LSPS(val, this.pagesize, this.searchContent)
    },
    //查询组件回调
    searchCallBack(newData) {
      let obj = {}
      for (let i = 0; i < newData.length; i++) {
        obj[newData[i].EN] = newData[i].value
      }
      this.searchContent = obj
    },
    //搜索
    sunS_F() {
      //console.log(this.searchContent); //用这组数据去ajax查询
      this.forData(this.currentPage, this.pagesize, this.searchContent)
    },
    //增加
    toAdd(toAddData) {
      console.log('toAddData')
      console.log(toAddData)
      let obj = {}
      for (let i = 0; i < toAddData.length; i++) {
        obj[toAddData[i].EN] = toAddData[i].value
      }
      let cjobj = {}
      //"typeGroupCode"
      cjobj['typeGroupCode'] = obj['typeGroupCode']
      cjobj['typeGroupName'] = obj['typeGroupName']
      addSTypegroup(cjobj)
        .then((response) => {
          this.forData(this.currentPage, this.pagesize, this.searchContent)
          this.$message({
            message: response.message,
            type: response.flag ? 'success' : 'warning',
          })
        })
        .catch(() => {
          this.$message.error('添加失败')
        })
    },
    //单项删除
    deleteList(id) {
      console.log(id)
      let arrId = [id]
      this.$confirm('确认删除？')
        .then((_) => {
          deletetSTypegroup(arrId).then((response) => {
            this.forData(this.currentPage, this.pagesize, this.searchContent) //刷新列表
          })
          done()
        })
        .catch((_) => {})
    },
    //查看类型
    typeFuns(id) {
      console.log('查看类型')
      this.styles_left.type = true //左边变窄
      this.penetrateId = id
      getFindRight(id).then((response) => {
        console.log(response)
        this.rightHurdleData = response.data
      })
    },
    //查看
    makeExaId(row) {
      let copyDialog = true
      this.DialogVisibleExamine = copyDialog
      this.examineData = row
    },
    //修改
    modifyData(value, MDData) {
      console.log(value, MDData)
      if (value) {
        let id = MDData.id
        putSTypegroup(id, MDData)
          .then((Response) => {
            this.forData(this.currentPage, this.pagesize, this.searchContent)
            this.$message({
              message: '修改成功!',
              type: 'success',
            })
          })
          .catch(() => {
            this.$message.error(
              '错误信息：api/admin/baseTenantInformation/${id}！'
            )
          })
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.main {
  /deep/.el-table .cell {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
